<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    /* 侧边预订框 */
    .el-drawer__header {
        height: 57px;
        padding: 0 24px;
        border-bottom: 1px solid #E9EAED;
    }

    .el-tabs__nav-wrap::after {
        background-color: transparent;

    }

    .el-tabs {
        height: 56px;
    }

    .orderDrawer .el-tabs__active-bar {
        height: 4px;
        width: 96px !important;
    }

    .collectionDrawer .el-tabs__active-bar {
        height: 4px;
        width: 61px !important;
    }

    .el-tabs__header {
        margin: 0;
    }

    .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
    .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left: 16px;
    }

    .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
    .el-tabs--bottom .el-tabs__item.is-top:last-child,
    .el-tabs--top .el-tabs__item.is-bottom:last-child,
    .el-tabs--top .el-tabs__item.is-top:last-child {
        padding-right: 16px;
    }

    .el-tabs__active-bar {
        margin-left: -13px;
    }

    .el-tabs__header .el-tabs__item {
        text-align: center;
        font-size: 16px;
    }

    .el-tabs__nav {
        height: 56px;
        line-height: 56px;
    }

    .orderDetail__avatar {
        background: #fff;
        border-radius: 2px;
        border: 1px solid #f0f1f5;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 36px;
        font-size: 14px;
        padding: 0 8px;
        max-width: 10em;
    }

    .point-8,
    .point-12 {
        display: inline-block;
        background: #f5222d;
    }

    .point-8 {
        width: 8px;
        height: 8px;
        border-radius: 8px;
    }

    .roomInfo-item {
        border: 1px solid #e0e0e0;
        cursor: pointer;
        padding: 16px;
    }

    .collapse-title {
        flex: 1 0 90%;
        order: 1;
    }

    .el-collapse {
        margin-top: -1px;
    }

    .el-collapse-item__header {
        flex: 1 0 auto;
        order: -1;
    }

    .el-collapse-item__header .el-icon-arrow-right {
        font-size: 14px;
    }

    .el-collapse-item__header .el-icon-arrow-right:before {
        content: "\e791" !important;
    }

    .el-collapse-item__header {
        height: 53px;
        line-height: 53px;
    }

    .ellipsis {
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 4px;
        background: #f2f3f6;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .more_btn {
        background-color: white;
        border: 1px solid rgb(33, 83, 206);
    }

    .el-dropdown-menu {
        padding: 0;
    }

    /* 其他消费框 */
    .el-drawer__returnBtn {
        display: inline-block;
        width: 88px;
        height: 32px;
        line-height: 32px;
        border-radius: 0 100px 100px 0;
        background: #f5f7fd;
        margin-left: -24px;
        -webkit-box-flex: unset !important;
        -ms-flex: unset !important;
        flex: unset !important;
        text-align: center;
        cursor: pointer;
    }

    .el-drawer__returnBtn:hover {
        color: #053dc8 !important;
    }

    .consumptionDrawer .consumptionDrawer-content {
        padding: 16px 24px;
    }

    .remindDrawer .remindDrawer-content {
        padding: 16px 24px;
    }

    .collectionDrawer .collectionDrawer-content {
        padding: 16px 24px;
    }

    .consumptionDrawer .el-drawer__header {
        margin-bottom: 0;
    }

    .remindDrawer .el-drawer__header {
        margin-bottom: 0;
    }

    /* 日志内容 */
    .el-timeline-item__timestamp {
        font-size: 12px;
    }

    /* end */
</style>

<body>
    <div id="app" class="">
        <!-- 通用dom -->
        <!-- 左边预订框 -->
        <el-drawer :visible.sync="orderShow" direction="rtl" size="550px" @closed="closeDrawer" class="orderDrawer">
            <template slot="title">
                <el-tabs v-model="orderActiveIndex">
                    <el-tab-pane label="订单详情" name="1"></el-tab-pane>
                    <el-tab-pane label="操作日志" name="2"></el-tab-pane>
                </el-tabs>
            </template>
            <template v-if="orderActiveIndex == 1">
                <div class="pl-24 pr-24" style="height: calc(100% - 57px);overflow: auto;">
                    <div>
                        <!-- 客人信息 -->
                        <div class="ub ub-ac ub-sb tx-17 tx-33">
                            <div class="ub-f1">
                                <div class="tx-b">
                                    11
                                </div>
                                <div class="tx-b  mt-8">
                                    <el-tag size="mini" type="warning">自来客</el-tag>
                                </div>
                            </div>
                            <div>
                                <div class="orderDetail__avatar">
                                    <div class="point-8 " style="background-color: rgb(78, 142, 255);"></div>
                                    <div class="ml-8 ut-s" title="自来客">自来客</div>
                                </div>
                            </div>
                        </div>
                        <!-- 订单金额 -->
                        <div class="ub ub-ac mt-24 ub-sb">
                            <div class="">
                                <div>订单金额</div>
                                <div class="tx-16 tx-bl tx-w mt-7">¥507.00</div>
                            </div>
                            <div class="">
                                <div>已付金额</div>
                                <div class="tx-16 tx-or tx-w mt-7">¥507.00</div>
                            </div>
                            <div class="">
                                <div>还需付款</div>
                                <div class="tx-16 tx-bl tx-w mt-7 tx-re">¥507.00</div>
                            </div>
                        </div>
                        <div class="br-t-dashed mt-16 mb-16"></div>
                        <!-- 房间信息 -->
                        <div class="ub ub-sb ">
                            <div class="tx-w tx-16">房间信息: ¥507</div>
                            <div class="tx-14">共 2 间房</div>
                        </div>
                        <!-- 房间信息 -->
                        <div class="mt-16 ">
                            <div class="roomInfo-item ub ub-ac ub-sb mb-8">
                                <div>
                                    <div class="tx-w">雅致双床-356</div>
                                    <div class="tx-12 tx-99 mt-8">2022-06-22 至 06-24，2晚</div>
                                </div>
                                <div>
                                    <span class="tx-bl">入住人</span>
                                    <div class="bgc-bl tx-wh circular uw-16 uh-16 ib tx-c le-16">0</div>
                                </div>
                                <div>
                                    <span class="mr-10">¥338.00</span>
                                    <el-tag size="mini" type="warning">已预订</el-tag>
                                </div>
                            </div>
                        </div>
                        <!-- 添加消费1 -->
                        <el-collapse class="mt-14" accordion>
                            <el-collapse-item>
                                <span slot="title" class="collapse-title">
                                    <div class="ub ub-sb w-full">
                                        <div class="tx-w tx-14">其他消费：
                                            ¥0.00</div>
                                        <div>
                                            <el-button size="small" type="text" class="tx-14"
                                                @click.stop="showConsumptionDrawer()">+ 添加消费
                                            </el-button>
                                            <!-- 打开其他消费框 -->
                                            <el-drawer :append-to-body="true" :visible.sync="consumptionDrawerActive"
                                                size="550px" ref="consumptionDrawer" class="consumptionDrawer">
                                                <template slot="title">
                                                    <div class="ub ub-ac">
                                                        <div class="el-drawer__returnBtn mr-16 tx-33"
                                                            @click="closeConsumptionDrawer(2)">
                                                            <i class="el-icon-back tx-16"></i>
                                                            返回
                                                        </div>
                                                        <div class="tx-16 tx-w tx-33">添加消费</div>
                                                    </div>
                                                </template>
                                                <div class="consumptionDrawer-content"
                                                    style="height: calc(100% - 57px);overflow: auto;">
                                                    <el-form :model="consumptionForm" :rules="consumptionRules"
                                                        ref="consumptionForm" label-width="6em" class="demo-ruleForm"
                                                        size="small">
                                                        <el-form-item label="消费项目" prop="item">
                                                            <el-select v-model="consumptionForm.item"
                                                                placeholder="请选择消费项目" class="w-full">
                                                                <el-option :label="item.name" :value="item.id"
                                                                    v-for="(item, index) in consumptionOption"
                                                                    :key="index">
                                                                </el-option>
                                                                <el-option label="豆沙包" value="shanghai"></el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                        <el-form-item label="数量" prop="num">
                                                            <el-input v-model="consumptionForm.num" class="w-full">
                                                            </el-input>
                                                        </el-form-item>
                                                        <el-form-item label="金额" prop="amount">
                                                            <el-input v-model="consumptionForm.amount" class="w-full">
                                                            </el-input>
                                                        </el-form-item>
                                                        <el-form-item label="消费日期" prop="amount">
                                                            <el-date-picker v-model="consumptionForm.date" type="date"
                                                                placeholder="选择消费日期" style="width: 100%">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                        <el-form-item label="备注">
                                                            <el-input type="textarea" v-model="consumptionForm.remarks"
                                                                maxlength="250" class="tx-13" show-word-limit>
                                                            </el-input>

                                                        </el-form-item>
                                                    </el-form>
                                                </div>
                                                <div class="el-drawer__footer ub ub-pe">
                                                    <div>
                                                        <el-button size="small" class="tx-14"
                                                            @click="closeConsumptionDrawer(2)">取消</el-button>
                                                        <el-button type="primary" size="small" class="tx-14"
                                                            @click="closeConsumptionDrawer(1)">确认
                                                        </el-button>
                                                    </div>
                                                </div>
                                            </el-drawer>
                                        </div>
                                    </div>
                                </span>
                                <el-table :data="[]" border style="width: 100%"
                                    :header-cell-style="{background:'#eaedf4','color':'#333'}">
                                    <el-table-column prop="date" label="消费项目" width="100">
                                    </el-table-column>
                                    <el-table-column prop="name" label="消费金额" width="100">
                                    </el-table-column>
                                    <el-table-column prop="province" label="消费日期" width="100">
                                    </el-table-column>
                                    <el-table-column prop="city" label="录入人" width="100">
                                    </el-table-column>
                                    <el-table-column prop="address" label="备注" width="100">
                                    </el-table-column>
                                    <el-table-column fixed="right" label="操作">
                                        <template slot-scope="scope">
                                            <i class="el-icon-delete"></i>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>
                        </el-collapse>
                        <!-- 收款金额 -->
                        <el-collapse accordion>
                            <el-collapse-item>
                                <span slot="title" class="collapse-title">
                                    <div class="ub ub-sb w-full">
                                        <div class="tx-w tx-14">收款金额：
                                            ¥0.00</div>
                                        <div>
                                            <el-button size="small" type="text" class="tx-14"
                                                @click.stop="showCollectionDrawer()">+ 收款/退款
                                            </el-button>
                                            <!-- 收入框 -->
                                            <el-drawer :append-to-body="true" :visible.sync="collectionDrawerActive"
                                                size="550px" ref="collectionDrawer" class="collectionDrawer">
                                                <template slot="title">
                                                    <div class="ub ub-ac">
                                                        <div class="el-drawer__returnBtn mr-16 tx-33"
                                                            @click="closeCollectionDrawer(2)">
                                                            <i class="el-icon-back tx-16"></i>
                                                            返回
                                                        </div>
                                                        <el-tabs v-model="collectionDrawerIndex">
                                                            <el-tab-pane label="收款" name="1"></el-tab-pane>
                                                            <el-tab-pane label="退款" name="2"></el-tab-pane>
                                                        </el-tabs>
                                                    </div>
                                                </template>
                                                <div class="collectionDrawer-content"
                                                    style="height: calc(100% - 57px);overflow: auto;">
                                                    <div class="ub ub-ac ub-sb mb-24">
                                                        <div class="">
                                                            <div>订单金额</div>
                                                            <div class="tx-16 tx-bl tx-w mt-7">¥507.00</div>
                                                        </div>
                                                        <div class="">
                                                            <div>已付金额</div>
                                                            <div class="tx-16 tx-or tx-w mt-7">¥507.00</div>
                                                        </div>
                                                        <div class="">
                                                            <div>还需付款</div>
                                                            <div class="tx-16 tx-bl tx-w mt-7 tx-re">¥507.00</div>
                                                        </div>
                                                    </div>
                                                    <el-form :model="collectionForm" :rules="collectionRules"
                                                        ref="collectionForm" label-width="6em" class="demo-ruleForm"
                                                        size="small">
                                                        <el-form-item label="项目" prop="item"
                                                            v-if="collectionDrawerIndex == 1">
                                                            <el-radio-group v-model="collectionForm.item">
                                                                <el-radio label="1">收款</el-radio>
                                                                <el-radio label="2">收押金</el-radio>
                                                            </el-radio-group>
                                                        </el-form-item>
                                                        <el-form-item label="项目" prop="item"
                                                            v-if="collectionDrawerIndex == 2">
                                                            <el-radio-group v-model="collectionForm.item2">
                                                                <el-radio label="1">退款</el-radio>
                                                                </el-radio>
                                                                <el-radio label="2">退押金</el-radio>
                                                            </el-radio-group>
                                                        </el-form-item>
                                                        <el-form-item label="支付方式" prop="plymode">
                                                            <el-select v-model="collectionForm.plymode"
                                                                placeholder="请选择消费项目" class="w-full">
                                                                <el-option :label="item.name" :value="item.id"
                                                                    v-for="(item, index) in collectionOption"
                                                                    :key="index">
                                                                </el-option>
                                                                <el-option label="微信支付" value="shanghai">
                                                                </el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                        <el-form-item label="金额" prop="amount">
                                                            <el-input v-model="collectionForm.amount" class="w-full">
                                                            </el-input>
                                                        </el-form-item>
                                                        <el-form-item label="日期" prop="date">
                                                            <el-date-picker v-model="collectionForm.date" type="date"
                                                                placeholder="选择日期" style="width: 100%">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                        <el-form-item label="备注">
                                                            <el-input type="textarea" v-model="collectionForm.remarks"
                                                                maxlength="250" class="tx-13" show-word-limit>
                                                            </el-input>
                                                        </el-form-item>
                                                    </el-form>
                                                </div>
                                                <div class="el-drawer__footer ub ub-pe">
                                                    <div>
                                                        <el-button size="small" class="tx-14"
                                                            @click="closeConsumptionDrawer(2)">取消</el-button>
                                                        <el-button type="primary" size="small" class="tx-14"
                                                            @click="closeConsumptionDrawer(1)">确认
                                                        </el-button>
                                                    </div>
                                                </div>
                                            </el-drawer>
                                        </div>
                                    </div>
                                </span>
                                <el-table :data="[]" border style="width: 100%"
                                    :header-cell-style="{background:'#eaedf4','color':'#333'}">
                                    <el-table-column prop="date" label="项目" width="100">
                                    </el-table-column>
                                    <el-table-column prop="name" label="支付方式" width="100">
                                    </el-table-column>
                                    <el-table-column prop="province" label="金额" width="100">
                                    </el-table-column>
                                    <el-table-column prop="city" label="日期" width="100">
                                    </el-table-column>
                                    <el-table-column prop="address" label="备注" width="100">
                                    </el-table-column>
                                    <el-table-column fixed="right" label="操作">
                                        <template slot-scope="scope">
                                            <i class="el-icon-delete"></i>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>
                        </el-collapse>
                        <!-- 订单提醒 -->
                        <el-collapse accordion>
                            <el-collapse-item>
                                <span slot="title" class="collapse-title">
                                    <div class="ub ub-sb w-full">
                                        <div class="tx-w tx-14">订单提醒：1个</div>
                                        <div>
                                            <el-button size="small" type="text" class="tx-14"
                                                @click.stop="showRemindDrawer()">+ 添加提醒
                                            </el-button>

                                            <el-drawer :append-to-body="true" :visible.sync="remindDrawerActive"
                                                size="550px" ref="remindDrawer" class="remindDrawer">
                                                <template slot="title">
                                                    <div class="ub ub-ac">
                                                        <div class="el-drawer__returnBtn mr-16 tx-33"
                                                            @click="closeremindDrawer(2)">
                                                            <i class="el-icon-back tx-16"></i>
                                                            返回
                                                        </div>
                                                        <div class="tx-16 tx-w tx-33">添加提醒</div>
                                                    </div>
                                                </template>
                                                <div class="remindDrawer-content"
                                                    style="height: calc(100% - 57px);overflow: auto;">
                                                    <el-form :model="remindForm" :rules="remindRules" ref="remindForm"
                                                        label-width="6em" class="demo-ruleForm" size="small">
                                                        <el-form-item label="提醒时间" prop="date">
                                                            <el-date-picker v-model="remindForm.date" type="date"
                                                                placeholder="选择消费日期" style="width: 100%">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                        <el-form-item label="提醒内容" prop="content">
                                                            <el-input type="textarea" v-model="remindForm.content"
                                                                maxlength="250" class="tx-13" show-word-limit>
                                                            </el-input>
                                                        </el-form-item>
                                                    </el-form>
                                                </div>
                                                <div class="el-drawer__footer ub ub-pe">
                                                    <div>
                                                        <el-button size="small" class="tx-14"
                                                            @click="closeremindDrawer(2)">取消</el-button>
                                                        <el-button type="primary" size="small" class="tx-14"
                                                            @click="closeremindDrawer(1)">确认
                                                        </el-button>
                                                    </div>
                                                </div>
                                            </el-drawer>
                                        </div>
                                    </div>
                                </span>
                                <div class="ub ub-ac">
                                    <div class="ellipsis tx-14 ub-f1">
                                        2022-06-20 15:33
                                        <span class="ml-10">1</span>
                                    </div>
                                    <div style="width: 30px;" class="tx-c ml-20 " @click.stop="showRemindDrawer()">
                                        <i class="el-icon-edit tx-18 cup"></i>
                                    </div>
                                    <div style="width: 25px;" class="tx-r">
                                        <i class="el-icon-delete tx-18 cup"></i>
                                    </div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                        <div class="mt-16 ml-3">备注：无</div>
                        <div class="mt-12 ml-3">订单号：98776001113012736000</div>
                    </div>
                </div>
                <div class="el-drawer__footer">
                    <div>
                        <el-dropdown>
                            <el-button size="small" class="tx-bl bor-bl tx-14 more_btn">
                                更多操作
                                <i class="el-icon-caret-bottom"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item><span class="tx-re">取消预订</span></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div>
                        <el-button size="small" class="tx-14 bor-bl tx-bl">打印</el-button>
                        <el-button type="primary" size="small" class="tx-14">修改订单</el-button>
                    </div>
                </div>
            </template>
            <template v-if="orderActiveIndex == 2">
                <div class="pl-24 pr-24">
                    <el-timeline-item :timestamp="log.updateTime+' 操作人:'+log.operator+'\n\n\n\n'+log.operationTypeName"
                        placement="top" v-for="(log,index) in listLog">
                        <p v-html="log.content" style="white-space: pre-line;line-height: 1.6;" class="tx-33 "></p>

                    </el-timeline-item>
                </div>
            </template>
        </el-drawer>
    </div>
    <script type="text/babel">
        new Vue({
            el: '#app',
            data: {
                // 订单/日志显示索引
                orderActiveIndex: "1",
                // 订单框显示索引
                orderShow: true,
                listLog: [
                    {
                        "id": "62b124712763ea77b13003bb",
                        "createTime": "2022-06-21 09:52:49",
                        "updateTime": "2022-06-21 09:52:49",
                        "createBy": 120149,
                        "operator": "泰迪",
                        "operationType": 4,
                        "operationTypeName": "修改订单",
                        "content": "修改为\n客源：自来客   预订人：123   手机：1\n雅致双床房-356；2022-06-21 12:00:00；共2晚；房费¥338；\n雅致双床房-237；2022-06-22 12:00:00；共1晚；房费¥169；\n其他消费：\n豆沙包×1，¥5\n备注：-\n订单提醒：\n2022-06-20 15:33:00，1\n"
                    }
                ],
                // 其他消费框索引
                consumptionDrawerActive: false,
                // 收入/退款框索引
                collectionDrawerActive: false,
                collectionDrawerIndex: "1",
                // 添加消费对象
                consumptionForm: {
                    item: "收款",
                    num: "1",
                    amount: "10",
                    date: "2022-05-05",
                    remarks: ""
                },
                // 其他消费消费项目选项
                consumptionOption: [],
                // 添加消费框内容自定义验证
                consumptionRules: {
                    item: [
                        { required: true, message: '请选择消费项目', trigger: 'change' },
                    ],
                    num: [
                        { required: true, message: '请输入数量', trigger: 'blur' }
                    ],
                    amount: [
                        { required: true, message: '请输入金额', trigger: 'blur' }
                    ],
                    date: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' },
                    ]
                },
                // 收入框
                // 添加收入信息
                collectionForm: {
                    plymode: "豆沙包",
                    item: "1",
                    item2: "1",
                    amount: "10",
                    date: "2022-05-05",
                    remarks: ""
                },
                // 收入选项
                collectionOption: [],
                // 收入选项内容自定义验证
                collectionRules: {
                    plymode: [
                        { required: true, message: '请选择支付方式', trigger: 'change' },
                    ],
                    item: [
                        { required: true, message: '请选择项目', trigger: 'change' },
                    ],
                    amount: [
                        { required: true, message: '请输入金额', trigger: 'blur' }
                    ],
                    date: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' },
                    ]
                },
                // 订单提醒
                remindDrawerActive: false,
                remindForm: {
                    date: "",
                    content: ""
                },
                // 订单提醒内容自定义验证
                remindRules: {
                    content: [
                        { required: true, message: '请输入金额', trigger: 'blur' }
                    ],
                    date: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' },
                    ]
                },
            },
            created() {
            },
            methods: {
                // 关闭最外层drawer
                closeDrawer() {
                    // 隐藏顶层弹框
                    this.CL();
                },
                // 打开其他消费框
                showConsumptionDrawer() {
                    this.consumptionDrawerActive = true;
                },
                // 关闭其他消费框
                closeConsumptionDrawer(type) {
                    this.$refs.consumptionDrawer.closeDrawer();
                },
                //打开收款按钮
                showCollectionDrawer() {
                    this.collectionDrawerActive = true;
                },
                //关闭收款框按钮
                closeCollectionDrawer(type) {
                    this.$refs.collectionDrawer.closeDrawer();
                },
                //打开订单提醒按钮
                showRemindDrawer() {
                    this.remindDrawerActive = true;
                },
                closeremindDrawer() {
                    this.remindDrawerActive = false;
                }
            }
        })
    </script>

</body>

</html>